<template>
  <div>
    <el-card class="box-card">
      <!--      <div slot="header" class="clearfix">-->
      <!--        <span>域配置</span>-->
      <!--      </div>-->
      <!-- 查询 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="域名称">
          <el-input v-model="queryForm.domainName" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="域Code">
          <el-input v-model="queryForm.domainCode" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="addNew">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="pageResult.data"
        border
        :default-sort="{prop: 'updateTime', order: 'descending'}"
        style="width: 100%; margin-top: 20px;font-size: 10px">
        <el-table-column
          align="center"
          prop="domainName"
          label="域名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="domainCode"
          label="域Code">
        </el-table-column>
        <el-table-column
          align="center"
          prop="desc"
          label="描述">
        </el-table-column>
        <el-table-column
          align="center"
          label="是否有效">
          <template slot-scope="scope">
            <span v-if="scope.row.isDelete === 1">无效</span>
            <span v-if="scope.row.isDelete === 0">有效</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          width="300"
          label="创建/修改时间">
          <template slot-scope="scope">
            {{ dateFormat(scope.row.createTime) }}/ {{ dateFormat(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button style="margin-left: 0px" type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
            <el-button style="margin-left: 0px;color: #1fdff1" type="text" size="mini" @click="toScene(scope.row)">场景</el-button>
            <el-button style="margin-left: 0px;color: #189c1a" type="text" size="mini" @click="toDisableOrEnable(scope.row)">
              <span v-if="scope.row.isDelete === 1">启用</span>
              <span v-if="scope.row.isDelete === 0">禁用</span>
            </el-button>
            <el-button style="margin-left: 0px;color: red" type="text" size="mini" @click="deleteOne(scope.row)">删除</el-button>
            <vue-log module="REC_DOMAIN" :target-id="scope.row.uuid"></vue-log>
          </template>
        </el-table-column>
      </el-table>

      <el-footer>
        <vue-page :paginator="pageResult.paginator" :query="query"></vue-page>
      </el-footer>
    </el-card>
    <!-- 组件们 -->
    <domain-form ref="domainForm"></domain-form>
    <domain-scene ref="domainScene"></domain-scene>
  </div>
</template>
<script>

import domainForm from "./dialog/domainForm";
import {domainPageQuery} from "../../api/domainApi";
import vuePage from "../common/vue-page.vue"
import vueLog from "../common/vue-log.vue"
import domainScene from "./dialog/domainScene";

export default {
  name: "domain",
  filters: {},
  components: {
    domainForm,
    vuePage,
    vueLog,
    domainScene
  },
  data() {
    return {
      queryForm: {
        domainName: '',
        domainCode: ''
      },
      // 查询返回结果
      pageResult: {
        data: [],
        paginator: {
          currentPage: 0,
          totalCount: 0,
          pageSize: 10,
          totalPage: 0
        }
      },
      logTargetId: undefined,
    }
  },
  created() {
    this.query()
  },
  mounted() {
  },
  methods: {
    async query() {
      let vm = this
      let ret = await domainPageQuery(vm.queryForm, vm.pageResult.paginator)
      if (ret.ok) {
        vm.pageResult = ret.data.queryPage
      } else {
        vm.$message({type: 'error', message: '查询失败：' + ret.message});
      }
    },
    addNew() {
      this.$refs.domainForm.load();
    },
    toEdit(row) {
      this.$refs.domainForm.load(row);
    },
    toScene(row) {
      this.$refs.domainScene.load(row);
    },
    /**
     * TODO 域的下线需要进行判断
     *
     * @param row row
     */
    toDisableOrEnable(row) {
      let vm = this
      let clone = vm.$cloneObj(row);
      clone.isDelete = clone.isDelete ^ 1
      vm.$confirm('是否确认修改为【' + (clone.isDelete === 1 ? '无效' : '有效') + '】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.domainForm.doSave(clone);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    /**
     * TODO 删除一条记录比较复杂
     *      暂时不支持删除
     * @param row row
     */
    deleteOne(row) {

    },
  }
}
</script>
